<template>
  <div id="user-detail-page">
    <a-row :gutter="[16, 16]">
      <a-col :sm="24" :md="16" :xl="18">
        <a-card>
          <template #title>
            <a-flex justify="space-between">
              <a-space><h3>用户详情</h3></a-space>
              <a-space>
                <RouterLink to="/">返回主页</RouterLink>
              </a-space>
            </a-flex>
          </template>
          <div class="content">
            <a-flex gap="middle">
              <a-image
                :src="user.userAvatar"
                :alt="user.userName"
                style="width: 50vh; height: 50vh; object-fit: cover; border-radius: 10%"
              />

              <a-tabs v-model:active-key="activeKey" @change="onTabsChange">
                <a-tab-pane key="1" tab="用户简介">1</a-tab-pane>
                <a-tab-pane key="2" tab="关注用户">
                  <a-list :grid="{ gutter: 16, column: 1 }" style="height: 50vh;width: 30vw;  overflow: auto"  :data-source="followInfoList">
                    <template #renderItem="{ item }">
                      <a-list-item>
                        <a-list-item-meta>
                          <template #description>
                            <a-image
                              :src="item.url"
                              :width="100"
                              style="object-fit: cover"
                            ></a-image>
                          </template>
                          <template #title>
                            <a href="https://www.antdv.com/">{{ item?.user?.userName }}</a>
                          </template>
                          <template #avatar>
                            <a-avatar :src="item?.user?.userAvatar" />
                          </template>
                        </a-list-item-meta>
                      </a-list-item>
                    </template>
                  </a-list>


                  <a-button @click="loadMore" :loading="loading">加载更多</a-button>
                </a-tab-pane>
              </a-tabs>
            </a-flex>
          </div>
        </a-card>
      </a-col>
      <!--      用户详情 作者，名称，简介，分类，标签，格式，宽度，高度，宽高比，大小-->
      <a-col :sm="0" :md="8" :xl="6">
        <a-card title="用户详情">
          <a-descriptions :column="1">
            <a-descriptions-item label="头像">
              <a-space>
                <a-avatar :src="user?.userAvatar ?? '-'"></a-avatar>
                <a-tag color="green">{{ user?.userName }}</a-tag>
              </a-space>
            </a-descriptions-item>
            <a-descriptions-item label="昵称">{{ user.userName }}</a-descriptions-item>
            <a-descriptions-item label="进入时间">
              {{ dayjs(user.createTime).format('YYYY-MM-DD HH:mm:ss') }}
            </a-descriptions-item>
            <a-descriptions-item label="共同好友" v-if="id != userStore.userInfo?.id">
              <a-card>
                <a-space v-for="user in commonUsers" :key="user.id">
                  <a-avatar :src="user.userAvatar" @click="reLoadPage(user.id as number)" />
                  <span>{{ user.userName }}</span>
                </a-space>
              </a-card>
            </a-descriptions-item>
          </a-descriptions>

          <a-space :size="40" v-if="userStore.isLogin">
            <a-button danger @click="router.push('/user/edit/my')">修改资料</a-button>
          </a-space>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import {
  getUserVoByIdUsingGet,
  listCommonFollowUsersUsingGet,
  queryFollowInfoListUsingGet,
} from '@/api/userController.ts'
import { useUserStore } from '@/stores/user.ts'
import dayjs from 'dayjs'
import router from '@/router'

const userStore = useUserStore()

interface Props {
  id: string | number
}

const activeKey = ref('1')
const props = defineProps<Props>()

const user = ref<API.UserVO>({})
// 查询用户
const getUser = async () => {
  const res = await getUserVoByIdUsingGet({
    id: props.id,
  })
  if (res.data.code != 0) {
    return
  }
  user.value = res.data.data
}

//

// 查询共同好友
const commonUsers = ref<API.UserVO[]>([])
const getCommonUsers = async () => {
  const res = await listCommonFollowUsersUsingGet({
    followedUserId: props.id,
  })
  if (res.data.code === 0 && res.data.data) {
    commonUsers.value = res.data.data
  }
}

const onTabsChange = (key: string) => {
  // 清空minTime
  minTime.value = ''
  // 清空offset
  offset.value = 0
  // 清空followInfoList
  followInfoList.value = []
  if (key === '2') {
    getFollowUsers()
  }
}

// 获取关注用户
const followInfoList = ref<API.PictureVO[]>([])
const minTime = ref<string>('')
const offset = ref<number>(0)
const loading = ref<boolean>(false)
const getFollowUsers = async () => {
  // 获取当前时间毫秒值
  loading.value = true
  const res = await queryFollowInfoListUsingGet({
    max: minTime.value,
    offset: offset.value,
    userId: props.id,
  })
  if (res.data.code === 0 && res.data.data) {
    res.data.data?.records?.forEach((item) => {
      followInfoList.value.push(item)
    })
    minTime.value = res.data.data.minTime
    offset.value = res.data.data.offset
  }
  loading.value = false
}

// 加载更多
const loadMore = () => {
  getFollowUsers()
}

// 跳转页面
const reLoadPage = async (id: number) => {
  await router.push(`/user/detail/${id}`)
  //   刷新页面
  location.reload()
}

onMounted(() => {
  getUser()
  getCommonUsers()
})
</script>

<style scoped lang="scss"></style>
